<template>
    <div>
        <div class="flex jus-flex-end pt-15 pr-15 font-18 cursor-pointer">
            <i @click="goBack" class="el-icon-close"></i>
        </div>
        <div class="color-333 font-20 weight-bold text-center">找回密码</div>
        <div class="pd-30">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <div class="mobile-input">
                    <el-form-item prop="mobile">
                        <el-input placeholder="请输入手机号" v-model="form.mobile">
                            <div slot="prefix">
                                <el-dropdown @command="chooseCountryCode">
                                    <el-button type="primary">
                                        {{country_code[current_code].name}}
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="index" :key="index" v-for="(item,index) in country_code">{{item.name}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="mt-15">
                    <el-form-item prop="code">
                        <el-input placeholder="请输入验证码" v-model="form.code">
                            <el-button :style="buttonStyle" @click="sendSms" class="code-button" round size="mini" slot="suffix" type="info">{{button_text}}</el-button>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="mt-15">
                    <el-form-item prop="password">
                        <el-input :type="password_visible ? 'text' : 'password'" placeholder="请输入密码" v-model="form.password">
                            <i :class="password_visible ? 'icon-yanjing-zhengyan' : 'icon-biyan'" @click="password_visible=!password_visible" class="iconfont pr-10 cursor-pointer" slot="suffix"></i>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="mt-15">
                    <el-form-item prop="re_password">
                        <el-input :type="re_password_visible ? 'text' : 'password'" placeholder="请再次输入密码" v-model="form.re_password">
                            <i :class="re_password_visible ? 'icon-yanjing-zhengyan' : 'icon-biyan'" @click="re_password_visible=!re_password_visible" class="iconfont pr-10 cursor-pointer" slot="suffix"></i>
                        </el-input>
                    </el-form-item>
                </div>

                <div class="mt-30">
                    <el-button :loading="loading" @click="toUpdate" class="login-button" round>保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getStorage, setStorage } from '@/utils/storage'
export default {
    data() {
        let validatePass = (rule, value, callback) => {
            let reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/)
            if (value === '') {
                callback(new Error('请输入密码'))
            } else {
                if (this.ruleForm.re_password !== '') {
                    this.$refs.ruleFormRef.validateField('re_password')
                }
                callback()
            }
        }
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            ruleForm: {
                mobile: '',
                code: '',
                password: '',
                re_password: '',
            },

            rules: {
                mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { pattern: /^\d{6}$/, message: '验证码是六位数数字', trigger: 'blur' },
                ],
                re_password: [{ required: true, validator: validatePass2, trigger: 'blur' }],
            },
            current_code: 0,
            form: {},
            password_visible: false,
            re_password_visible: false,
            count_down: 0,
            loading: false,
        }
    },
    props:{
        country_code:{
            type:[Array,Object],
            default:[]
        }
    },
    computed: {
        button_text() {
            if (this.count_down > 0) {
                return this.count_down + '秒后重新获取'
            } else {
                return '获取验证码'
            }
        },
        buttonStyle() {
            if (this.count_down > 0) {
                return 'background: #eee !important;color: #999 !important;'
            } else {
                return 'background: #ffe7ec !important;color: #ff1c6d !important;'
            }
        },
    },
    mounted() {
        this.count_down = getStorage('forget_count_down') ? getStorage('forget_count_down') : 0
        if (this.count_down > 0) {
            this.startCountDown()
        }
    },
    methods: {
        chooseCountryCode(value) {
            this.current_code = value
        },
        goBack() {
            this.$emit('goBack')
        },
        sendSms() {
            if (!this.form.mobile) {
                this.$message.error('请输入手机号码')
                return false
            }
            let param = {
                country_code: this.country_code[this.current_code].code,
            }
            param.mobile = this.form.mobile
            this.$request.post('/auth/send_sms', param).then((res) => {
                if (this.count_down <= 0) {
                    this.count_down = 60
                }
                this.startCountDown()
            })
        },
        startCountDown() {
            const timer = setInterval(() => {
                this.count_down--
                setStorage('forget_count_down', this.count_down, this.count_down)
                if (this.count_down <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        },
        toUpdate() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    let param = {
                        country_code: this.country_code[this.current_code].code,
                        mobile: this.form.mobile,
                        code: this.form.code,
                        password: this.form.password,
                    }
                    this.$request
                        .post('/auth/forget_password', param)
                        .then((res) => {
                            this.goBack()
                        })
                        .catch((error) => {
                           
                        })
                        .finally((res) => {
                            this.loading = false
                        })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.code-button {
    border: none !important;
}
</style>